.header_wrap {
    display: flex;
    height: 150px;
    background: #fff;
    border-bottom: 1px solid #e8eaec;
    padding: 0 20px;
    margin-bottom: 20px;
    .avator {
        display: flex;
        align-items: center;
        padding: 20px;
    }

    .greeting {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;

        .hello {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .weather {
            color: #808695;
        }
    }

    .workplace {
        display: flex;
        justify-content: flex-end;
        color: #808695;
        .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            min-width: 100px;
            padding-right: 10px;
            .title{
                i{
                    padding: 3px;
                }
            }
            .content{
                font-size: 22px;
            }
        }
    }
}

.body_wrap{
    padding: 0 20px;
    color: #808695;
    .left{

        .left_box_wrap{
            background: #fff;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 14px;
            .header{
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px solid #e8eaec;
                .title{
                    i{
                        padding: 3px;
                    }
                }
                .more{
                    color: #2d8cf0;
                }
            }
            .content{
                padding: 10px;

                .project{
                    height: 300px;
                }

                .list_wrap{
                    .items{
                        display: flex;
                        flex: 1;
                        padding: 10px 0;
                        color: #515a6e;
                        border-bottom: 1px solid #e8eaec;
                        .cell{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 5px 0;

                        }

                        .avator{
                            display: flex;
                            width: 100px;
                        }
                        .content{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            flex: 1;
                            .name{
                                padding-bottom: 5px;
                            }
                            .desc{
                                font-size: 12px;
                                color: rgb(128, 134, 149);
                            }
                        }
                    }
                    .items:last-child{
                        border-bottom: 0px
                    }
                }
            }
        }
    }

    .right{

        .right_box_wrap{
            background: #fff;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 14px;
            .header{
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px solid #e8eaec;
                .title{
                    i{
                        padding: 3px;
                    }
                }
            }
            .content{
                padding: 10px;

                .card_wrap{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-bottom: 10px;
                    height: 100px;
                    justify-content: center;
                    background: #fff;
                    border-radius: 4px;
                    font-size: 14px;
                    cursor: pointer;
                    .icon{
                        font-size: 30px;
                        margin-bottom: 10px;
                    }
                    .name{

                    }
                    &:hover{
                        color: red
                    }
                }

                .todoList{
                    .actor_wrap{
                        display: flex;
                        align-items: center;
                    }
                }

                .list_wrap{
                    display: flex;
                    flex: 1;
                    color: #515a6e;

                    .cell{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 5px 0;

                    }

                    .avator{
                        display: flex;
                        width: 100px;
                    }
                    .content{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        flex: 1;
                        .name{
                            padding-bottom: 5px;
                        }
                        .desc{
                            font-size: 12px;
                            color: rgb(128, 134, 149);
                        }
                    }
                    .online{
                        width: 100px
                    }
                }
            }
        }
    }
}
